﻿
<ul class="breadcrumb">
    <li>
        <i class="icon-home"></i>
        <a href="/Home/Index">Home</a>
        <i class="icon-angle-right"></i>
    </li>
    <li><a href="#">Help</a></li>
</ul>

<br />

<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="col-md-8 col-sm-12 col-xs-12">
        <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-thevideo="https://www.youtube.com/embed/QjdltVyOdDg">How to Create Survey?<span style="font-size:16px;" class="pull-right hidden-xs showopacity icon-facetime-video"></span></a>
        <br />
        <br />
        <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-thevideo="https://www.youtube.com/embed/dmghyKm05yA" >How to participate in the survey?<span style="font-size:16px;" class="pull-right hidden-xs showopacity icon-facetime-video"></span></a>
    </div>

</div>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div>
                    <iframe style="width: 100%; height: 350px;" src="" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        autoPlayYouTubeModal();
        function autoPlayYouTubeModal() {
            var trigger = $("body").find('[data-toggle="modal"]');
            trigger.click(function () {
                var theModal = $(this).data("target"),
                    videoSRC = $(this).attr("data-theVideo"),
                    videoSRCauto = videoSRC + "?autoplay=1";
                $(theModal + ' iframe').attr('src', videoSRCauto);
                $(theModal + ' button.close').click(function () {
                    $(theModal + ' iframe').attr('src', videoSRC);
                });
            });
        }

    </script>
}
